<template>
  <div class="divider-hr">
    <i class="el-icon-third-jiandao" />
    <hr />
  </div>
</template>

<script>
export default {
  name: "DividerHr",
};
</script>

<style lang="stylus" scoped>
.divider-hr {
  margin: 0.2rem 0;
  padding: 0.01rem 0;
  position: relative;
}

.divider-hr hr {
  border: 0.02rem dashed #a4d8fa;
}

.divider-hr i[class*="el-icon-third-"] {
  color: #80c8f8;
  font-size: 0.25rem;
  position: absolute;
  top: 50%;
  left: 5%;
  transform: translateY(-50%);
  transition: all 2s;
}

.divider-hr:hover i[class*="el-icon-third-"] {
  left: 92%;
}
</style>